<template>
	<view class="home-container">
		<view class="top-container">
			<view>

			</view>
			<view class="lang-title">
				<text class="lang-title">常用语言</text> <text class="lang-size">7</text>
			</view>
			<view class="add-btn">
				添加
			</view>
			<SearchButtonVue></SearchButtonVue>
		</view>
		<view class="main-container">
			<view class="context-item" v-for="(item,index) in lang" :key="index" @longpress="show=true">
				<view class="lang-dot"></view>
				<view class="lang-item">{{item.name}}</view>
			</view>

			<u-action-sheet :actions="actionList" :closeOnClickOverlay="true" @close="show=false" @select="selectClick"
				:show="show" cancelText="取消"></u-action-sheet>

			<u-popup :show="showPopup" @close="close" @open="open" border-radius="14">
				<view class="pop-box">
					<view class="pop-title">
						添加常用语
					</view>
					<view class="input-box">
						<textarea class="input-textarea" v-model="currentLang" placeholder="请输入..." :maxlength="50" />
						<view class="textarea-count">{{ currentLang.length }}/50</view>
					</view>
					<view class="sure-btn">
						确认
					</view>

				</view>
			</u-popup>

		</view>

	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import SearchButtonVue from '../../components/SearchButton.vue';
	export default {
		components: {
			SearchButtonVue
		},
		data() {
			return {
				lang: [{
					name: '复方泛影葡胺注射液说明书-上海旭东海普药业有限公司'
				}, {
					name: '医生理由不合理'
				}, {
					name: '剂量过低'
				}],
				show: false,
				showPopup: false,
				currentLang: "",
				actionList: [{
					name: '编辑常用语'
				}, {
					name: '删除常用语'
				}]
			}
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			selectClick(index) {
				console.log(index)
				this.show = false
				this.showPopup = true


			}
		}
	}
</script>

<style scoped>
	.home-container {
		min-height: 100vh;
		padding: 32rpx;
	}

	.lang-title {
		height: 32rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-bottom: 40rpx;
		padding-top: 40rpx;
	}

	.lang-size {
		font-weight: 400;
		font-size: 40rpx;
		color: #0256FF;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 32rpx;
	}

	.add-btn {
		text-align: center;
		width: 116rpx;
		border-radius: 15px;
		background: #3283FF;
		padding: 3px 8px;
		margin: 12rpx 0rpx;
		color: white;
	}

	.main-container {
		margin-top: 32rpx;
	}

	.context-item {
		display: flex;
		padding: 32rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 26rpx;
		margin-bottom: 32rpx;
		background-color: white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		border-radius: 5rpx;
	}

	.lang-dot {
		display: inline-block;
		width: 24rpx;
		height: 24rpx;
		background-color: #FF0000;
		border-radius: 24rpx;
	}

	.lang-item {
		margin-left: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pop-box {
		padding: 32rpx;
	}

	.input-box {
		position: relative;
		margin: 0 32rpx 32rpx 32rpx;
	}

	.input-textarea {
		width: 100%;
		min-height: 200rpx;
		background: #f8f8f8;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		padding: 32rpx;
		color: #333;
		box-sizing: border-box;
	}

	.textarea-count {
		position: absolute;
		bottom: 16rpx;
		right: 16rpx;
		font-size: 24rpx;
		color: #999;
	}


	.pop-title {
		height: 40rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 40rpx;
		color: #1C2023;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		padding-bottom: 32rpx;
	}

	.sure-btn {
		font-family: Poppins, Poppins;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		line-height: 72rpx;
		margin-top: 50rpx;
		margin-left: 42rpx;
		width: 600rpx;
		background: #1D77FF;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
	}

	.com-bg {
		width: 100%;
		z-index: 0;
		position: absolute;
		object-fit: cover;
	}
</style>